﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="row">
            @using (Html.BeginForm("UploadFile", "Home", FormMethod.Post,new { @class="form-group", enctype = "multipart/form-data", id= "uploadFileForm" }))
            {
                <div class="form-inline">
                    <input type="file" id="file" name="file" accept=".xls,.xlsx" style="width:30%; display:inline"/>
                    <input id="uploadFileButton" type="button" class="btn btn-success" value="上 传" style="display:inline" />
                    <a id="downloadButton" class="btn btn-info" href="/Home/Download">下 载</a>
                    <div id="errorMessage" class="alert alert-danger" hidden="hidden"></div>
                </div>
            }
        </div>
    </div>
    <table id="tt" class="easyui-datagrid" >
        <thead>
            <tr>
                <th data-options="field:'Id'" style="width:300px">编号</th>
                <th data-options="field:'EngineeringId'" style="width:100px">工程</th>
                <th data-options="field:'MtypeId'" style="width:100px">类别</th>
                <th data-options="field:'CategoryId'" style="width:300px">隐患分类</th>
                <th data-options="field:'Name'" style="width:600px">名称</th>
                <th data-options="field:'GradeId'" style="width:100px">等级</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>  


    <script src="~/Scripts/jquery-1.11.3.js"></script>
    <script src="~/Scripts/jquery.easyui-1.4.5.js"></script>
    <script>
        $(function () {
            //标记文件格式是否正确
            var isOk = true;
            $("#file").change(function () {
                isOk = true;
                var filepath = $("input[name='file']").val(); // 获取文件路径
                //获取文件拓展名
                var extStart = filepath.lastIndexOf(".");
                var ext = filepath.substring(extStart, filepath.length).toUpperCase();


                if (ext != ".XLS" && ext != ".XLSX") {
                    $("#errorMessage").html("仅支持上传 .xls 或 .xlsx 格式的Excel文档文件！");
                    isOk = false;
                }
                else {
                    var file_size = this.files[0].size;
                    if (file_size > 10 * 1024 * 1024) {
                        $("#errorMessage").html("文件大小不能超过10M哦！");
                        isOk = false;
                    }
                    else {
                        $("#errorMessage").html("");
                    }
                }
                if (isOk == true) { //验证通过
                    $("#errorMessage").hide("fast");
                }
                else {
                    $("#errorMessage").show("fast");
                }
            });
            $("#uploadFileButton").on("click", function () {
                if (isOk == true) {
                    $.ajax({
                        cache: false,
                        data: new FormData($('#uploadFileForm')[0]),
                        url: "/Home/UploadFile",
                        type: "post",
                        processData: false,
                        contentType: false,
                        success: function (node) {
                            alert(node.Message);
                            $('#tt').datagrid("loadData", node.Obj)
                            window.location = "/Home/Download";
                        }
                    })
                }
                else {
                    alert("文件格式不正确或未选择文件!");
                }
            });
        })
    </script>

</body>
</html>
